<template>
  <div class="page">
    <m-header :title="type=='buy'?langText&&langText.buydetail:langText&&langText.selldetail" :canback="Boolean(1)">
      <span v-if="data.state == 2||data.state == 3" @click="toAppeal">申诉</span>
    </m-header>
    <section class="body">
      <ul class="list">
        <!-- <li class="item" >
          <span>{{langText&&langText.ordernumber}}</span>
          <span>{{data.ordersn}}</span>
        </li> -->
        <!-- <li class="item" v-if="type=='buy'&&status!=0">
          <span>{{langText&&langText.selleremailnumber}}</span>
          <span>{{data.sellinfo.username}}</span>
        </li> -->
        <!-- <li class="item" v-if="type=='buy'&&status!=0">
          <span>{{langText&&langText.buyermailboxnumber}}</span>
          <span>{{data.username}}</span>
        </li>
        <li class="item" v-if="type=='sell'">
          <span>{{langText&&langText.selleremailnumber}}</span>
          <span>{{data.username}}</span>
        </li> -->
        <!-- 与上面相反 -->
        <li class="item" v-if="data.state!=1&&data.state!=30">
          <span v-if="data.isowner==0">{{data.type==2?'卖家':'买家'}}</span>
          <span v-if="data.isowner==1">{{data.type==1?'卖家':'买家'}}</span>
          <span>{{data.isowner==1?data.buname:data.uuname}}</span>
        </li>
        <li class="item" v-if="type=='sell'&&data.buy_id">
          <span>{{langText&&langText.buyermailboxnumber}}</span>
          <span>{{data.buyinfo.username}}</span>
        </li>
        <li class="item">
          <span>{{langText&&langText.usdtnum}}</span>
          <span v-if="data.state==1||data.state==30">{{data.remain_amount}}</span>
          <span v-else>{{data.amount2}}</span>
        </li>
        <li class="item">
          <span>{{langText&&langText.unitprice}}</span>
          <span>{{data.uprice}}</span>
        </li>
        <li class="item" v-if="type != 'buy'">
          <span>{{langText&&langText.fee}}</span>
          <span>{{data.servicecharge}}</span>
        </li>
        <li class="item">
          <span>{{langText&&langText.totalamount}}</span>
          <span v-if="data.issplit==0&&(data.state == 1||data.state == 30)">{{data.totalprice}}</span>
          <span v-if="data.issplit==1&&(data.state==1||data.state==30)">{{(data.remain_amount*data.uprice).toFixed(3)}}</span>
          <span v-if="data.ordertime&&data.issplit==1&&data.state != 1">{{data.price}}</span>
          <span v-if="data.ordertime&&data.issplit==0&&data.state != 1">{{data.price}}</span>
        </li>
        <li class="item" v-show="data.isowner==0&&data.state==1">
          <span class="label">{{type=='buy'?'卖出':'买入'}}</span>
          <input class="inp" type="number" v-model="optData.amount" :placeholder="'最低限额：'+data.minimum">
        </li>
        <li class="item" v-show="data.isowner==0&&data.state==1">
          <span class="label">交易密码</span>
          <input class="inp" type="password" maxlength="6"  v-model="optData.pwd">
        </li>
        <template >
          <li class="item item-no-flex" v-show="data&&data.isowner==1&&data.type ==1&&data.state!=1&&data.state!=30">
            <span class="label">支付码</span>
            <div class="imgs">
              <div class="img-box" v-if="data.balipay_url" @click="bigImg(data.balipay_url)">
                <img :src="api+data.balipay_url" alt="">
              </div>
              <div class="img-box" v-if="data.bwechat_url" @click="bigImg(data.bwechat_url)">
                <img :src="api+data.bwechat_url" alt="">
              </div>
            </div>
          </li>
          <li class="item item-no-flex" v-if="data&&data.bbankact&&data.isowner==1&&data.type ==1&&data.state!=1&&data.state!=30">
              <div class="card">
                <div class="inner-card">
                  银行卡号：<span class="bankact">{{data.bbankact}}</span>
                  <!-- <i class="iconfont iconcard card-icon"></i> -->
                </div>
              </div>
          </li>
          <li class="item item-no-flex" v-show="data&&data.isowner==0&&data.type ==2&&data.state!=1">
            <span class="label">支付码</span>
            <div class="imgs">
              <div class="img-box" v-if="data.balipay_url" @click="bigImg(data.ualipay_url)">
                <img :src="api+data.ualipay_url" alt="">
              </div>
              <div class="img-box" v-if="data.bwechat_url" @click="bigImg(data.uwechat_url)">
                <img :src="api+data.uwechat_url" alt="">
              </div>
            </div>
          </li>
          <li class="item item-no-flex" v-if="data&&data.ubankact&&data.isowner==0&&data.type ==2&&data.state!=1">
              <div class="card">
                <div class="inner-card">
                  银行卡号：<span class="bankact">{{data.ubankact}}</span>
                  <!-- <i class="iconfont iconcard card-icon"></i> -->
                </div>
              </div>
          </li>
          <li class="item item-no-flex" v-if="data&&data.isowner==1&&data.type == 1&&data.state==2">
            <span class="label">支付凭证</span>
            <div class="upload" @click="$refs['lpwd'].open()">
              <!-- <input type="file" class="file"> -->
              <img class="img" :src="payData.payproof?api+payData.payproof:''" alt="">
            </div>
          </li>
          <li class="item item-no-flex" v-if="data&&data.isowner==0&&data.type == 2&&data.state==2">
            <span class="label">支付凭证</span>
            <div class="upload" @click="$refs['lpwd'].open()">
              <!-- <input type="file" class="file"> -->
              <img class="img" :src="payData.payproof?api+payData.payproof:''" alt="">
            </div>
          </li>
          <li class="item item-no-flex" v-if="data.state == 3||data.state == 4">
             <span class="label">支付凭证</span>
              <div class="upload" @click="bigImg(data.payproof)">
                <img class="img" :src="api+data.payproof" alt="">
              </div>
          </li>
          <!-- <li class="item">
            <span>支付方式</span>
            <span>{{payType==1?'微信':payType==2?'支付宝':'银联'}}</span>
          </li> -->
        </template>
      </ul>
      <button class="btn btn-origin btn-quit" @click="optOrder" v-if="data.isowner==0&&data.state==1">{{type=='buy'?'立即卖出':'立即买入'}}</button>
      <button class="btn btn-origin btn-quit" @click="toRevoke" v-if="data.isowner==1&&data.state==1">撤单</button>
      <button class="btn btn-origin btn-quit" @click="toPay" v-if="(data.isowner==0&&data.type==1&&data.state==3)||(data.isowner==1&&data.type==2&&data.state==3)">确认订单</button>
      <button class="btn btn-origin btn-quit" @click="toPay" v-if="type=='buy'&&data.state==2">{{langText&&langText.confirmpayment}}</button>
      <button class="btn btn-origin btn-quit qx" @click="qx" v-if="state==0">{{langText&&langText.cancel}}</button>
    </section>
    <!-- <transition name="test"> -->
      <div class="tips-wrap" v-if="showTips">
        <div class="tips">
            <div>手续费：{{servicecharge}}</div>
            <div>需要支付的USDT数额：{{allMoney}}</div>
            <div class="bnt-wrap">
              <span class="tips-btn" @click="sure">确定</span>
              <!-- <span class="tips-btn" @click="showTips = false">取消</span> -->
            </div>
        </div>
      </div>
    <!-- </transition> -->
    <m-load ref="load"></m-load>
    <m-pwd ref="pwd" @pay="pay"></m-pwd>
    <l-pwd ref="lpwd" @confirm="submitPay"></l-pwd>
    <div class="layer" v-show="viewFlag" @click="viewFlag = false;">
      <img :src="api+viewImg" alt="">
    </div>
  </div>
</template>
<script>
import { Trade,Business } from "@/server/server.js";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import mPwd from '@/components/pwd-alert.vue';
import lPwd from '@/components/large-alert.vue';
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";
export default {
  name: "set",
  data() {
    return {
      type:null,
      id:null,
      uid:null,
      data:{
        ordersn:null,
        num:null,
        price:null,
        total_money:null,
        state:null,
        username:null,
        langText:null,
        sellinfo:{
          username:null,
        }
      },
      state:null,
      langText:null,
      allTxt:null,
      isRevoke:false,//是否撤单 用于密码输入
      optData:{  //买入或卖出
        orderid	:null,
        pwd:null,
        amount:null,
      },
      viewImg:null,//查看的图片
      viewFlag:false,
      payData:{ //付款数据
        orderid:null,
        pwd:null,
        paytype:null,
        payproof:null,
      },
      conData:{//确认订单
        orderid: null,
        pwd: null,
      },
      payType:null,//支付方式
      showTips: false,
      servicecharge: null,
      allMoney: null,
      otc_charge: null,//手续费
    };
  },
  mounted(){
    this.getBusConfig();
  },
  created () {
    this.initDate();
    this.oDetail();
    // if(this.type=='buy'){this.buydetail()}else{this.selldetail()}
    
  },
  computed: {
    ...mapGetters(["userInfo","lang",'saveUserID','getLangId','api'])
  },
  methods: {
    initDate(){
      this.id = this.$route.query.id;
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('tradingcenter')))
      this.type = this.$route.query.type;
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
    },
    getBusConfig() {
      Business.getBusConfig().then(res => {
        if(res.code == 1) {
          this.otc_charge = res.data.otc_charge;
        }
      })
    },
    /**
     * 支付方式 1微信 2支付宝 3银联
     */
    payTypeTxt(type){
      switch(String(type)){
        case '1':
          return '微信';
        case '2':
          return '支付宝';
        case '3':
          return '银联';
      }
    },
    /**
     * 凭证与密码
     */
    submitPay(data){
        // console.log('data',data)
        this.payData.payproof = data.payproof;
        this.payData.paytype = data.paytype;
    },
    /**
     * 上传
     */
    change(event){
        let _This = this;
        let formData = new FormData();
        Load.loadStart(_This);            
        Util.uploadImgLimit(event.target.files[0],url=>{
            formData.append('image',url);
            Base.upload(formData).then((res)=>{
                Load.loadEnd(_This);
                if(res.code == 1){
                    // this.upladSrc = this.api+res.data;
                    // this.formData.image = res.data;
                }else {
                    mui.toast(res.msg);
                    return ;
                }
            })
        })
    },
    /**
     * 查看支付码
     */
    bigImg(img){
      this.viewFlag = true;
      this.viewImg = img;
    },
    /**
     * 卖家确认
     */
    sure() {
      Business.dealOrder(this.conData).then(res => {
        if(res.code ==1){
            mui.toast(res.msg);
            setTimeout(() => {
              this.$router.go(-1);
            }, 200);
        }else return mui.toast(res.msg);
      })
    },
    /**
     * 买家付款
     */
    payOrder() {
      Business.payOrder(this.payData).then(res=>{
        mui.toast(res.msg)
        if(res.code==1){
          this.$router.go(-1)
        }
      })
    },
    /**
     * 订单操作 买入或者卖出
     */
    optOrder(){
      this.optData.orderid = this.data.id;
      let msg = Util.isValidate(this.optData);
      if(msg) return mui.toast(msg);
      // console.log('optData',this.optData);return;
      if(this.type=='buy'){
        this.servicecharge = (this.optData.amount * (this.otc_charge/100)).toFixed(2);
        this.allMoney = Number(this.optData.amount*this.data.uprice)+Number(this.servicecharge);
        this.showTips = true;
        // this.sure();

      }else{
        Business.buyS(this.optData).then(res=>{
           if(res.code ==1){
             mui.toast(res.msg);
             setTimeout(() => {
               this.$router.go(-1);
             }, 200);
           }else return mui.toast(res.msg);
        })
      }
    },
    sure() {
        Business.sellB(this.optData).then(res=>{
          this.showTips = false;
           if(res.code ==1){
             mui.toast(res.msg);
             setTimeout(() => {
               this.$router.go(-1);
             }, 200);
           }else return mui.toast(res.msg);
        })
    },
    /**
     * 申诉
     */
    toAppeal() {
      this.$router.push({name:'Appeal',query:{'orderid':this.id}});
    },
    /**
     * 去撤单
     */
    toRevoke(){
      this.isRevoke = true;
      this.$refs['pwd'].open();
    },
    /**
     * 去付款 || 卖家确认订单
     */
    toPay(){
      this.isRevoke = false;
      this.$refs['pwd'].open();
    },
    /**
     * 撤单
     */
    revoke(pwd){
      Business.revokeOrder({orderid:this.data.id,pwd}).then(res=>{
        if(res.code ==1){
          mui.toast(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 200);
        }else return mui.toast(res.msg)
      })
    },
    /**
     * 订单详情
     */
    oDetail(){
      Business.oDetail({orderid:this.id}).then(res=>{
        if(res.code ==1){
          this.data = res.data;
          // this.optData.amount = this.data.minimum;
        }else return mui.toast(res.msg);
      })
    },
    qx(){
      let btnArr = [this.langText.cancel,this.langText.determine]
      
      try {
        if (plus) {
            mui.confirm(this.langText&&this.langText.fee+'?',this.langText.prompt,btnArr, actions => {
              if (actions.index == 1) {
                if(this.type=='buy'){
                  Trade.qxbuyorder({id:this.id}).then(res=>{
                    mui.toast(res.msg)
                    if(res.code==1){
                      setTimeout(()=>{this.$router.go(-1)},500)
                    }
                  })
                }else{
                  Trade.qxsellorder({id:this.id}).then(res=>{
                    mui.toast(res.msg)
                    if(res.code==1){
                      setTimeout(()=>{this.$router.go(-1)},500)
                    }
                  })
                }
              }else{
                return;
              }
            });
        }
      } catch (e) {
            mui.confirm(this.langText&&this.langText.fee+'?',this.langText.prompt,btnArr, actions => {
              if (actions.index == 1) {
                if(this.type=='buy'){
                  Trade.qxbuyorder({id:this.id}).then(res=>{
                    mui.toast(res.msg)
                    if(res.code==1){
                      setTimeout(()=>{this.$router.go(-1)},500)
                    }
                  })
                }else{
                  Trade.qxsellorder({id:this.id}).then(res=>{
                    mui.toast(res.msg)
                    if(res.code==1){
                      setTimeout(()=>{this.$router.go(-1)},500)
                    }
                  })
                }
              }else{
                return;
              }
            });
      }
    },
    buydetail(){
      Trade.buydetail({id:this.id}).then(res=>{
        if(res.code==1){
         this.data = res.data; 
         this.state = res.data.state;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    
    selldetail(){
      Trade.selldetail({id:this.id}).then(res=>{
        if(res.code==1){
         this.data = res.data; 
         this.state = res.data.state;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    /**
     * 交易密码
     */
    pay(pwd){
      if(this.isRevoke){
        this.revoke(pwd);
      }else {
        if(this.type=='buy'&&this.data.state == 2){
          [this.payData.pwd,this.payData.orderid] = [pwd,this.id];
          this.payOrder();//买家付款
        }else if(this.type=='sell'&&this.data.state == 3){
          [this.conData.orderid,this.conData.pwd] = [this.id,pwd];
          this.sure();//卖家确认
        }
      }
    }
  },
  components:{
      mPwd,lPwd
  },
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  background-color: @bg-color;
  color: #333;
  font-size: 34px;
  .list {
    margin: 0 @margin-primary @margin-primary;
    width: 710px;
    margin: 30px 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 20px;
    .item {
      .display-flex();
      justify-content: space-between;
      align-items: center;
      padding: @padding-primary 0;
      border-bottom: 1px solid #ddd;
      &:last-child{
        border-bottom: none;
      }
      span{
        &:last-child{
          font-size:24px;
          font-weight:400;
          color:rgba(153,153,153,1);
        }
      }
      .label {
        // flex: 0 0 80px;
      }
      .inp {
        flex: 0 0 50%;
        margin-bottom: 0;
        text-align: right;
        font-size: 24px;
      }
    }
    .item-no-flex {
      display: block;
      .imgs {
        .display-flex();justify-content: space-between;
        align-items: center;
        .img-box {
          position: relative;
          flex: 0 0 45%;
          img {
            width: 100%;height: 100%;
          }
          &:first-of-type::after {
            content: '支付宝';
            position: absolute;bottom: -30px;left: 50%;
            .transform(translateX(-50%));
            font-size: 24px;
          }
          &:nth-of-type(2)::after {
            content: '微信';
            position: absolute;bottom: -30px;left: 50%;
            .transform(translateX(-50%));
            font-size: 24px;
          }
        }
 
      }
      .card {
        .inner-card {
            .card-icon {
              font-size: 40px;
            }
            .bankact {
              font-size: 30px;
            }
        }
        // &::after {
        //   content: '银行卡';
        //   position: absolute;bottom: -40px;left: 50%;
        //   .transform(translate(-50%));
        //   font-size: 24px;
        // }
      }
      .upload {
        position: relative;
        width: 240px;height: 240px;
        border: 1px solid #333;
        margin-top: 20px;
        &::after{
          content: '+';
          position: absolute;top: 50%;left: 50%;
          .transform(translate(-50%,-50%));
          font-size: 40px;color: #333;
        }
        .file {
          position: absolute;top: 0;left: 0;
          width: 100%;height: 100%;
          opacity: 0;
        }
        .img {
          width:100%;height: 100%;position: absolute;z-index: 2;
        }
      }
    }
  }
  .btn-quit {
    width: 710px;
    margin-left: 20px;
    height: 88px;
  }
}
.test-enter {
  /* opacity: 0; */
  transform: translateX(10px);
}
.test-leave {
  opacity: 1;
}

.test-enter-active {
  transition: all 2s;
  opacity: 1;

}
.test-leave-active {
  opacity: 0;
  transition: all 2s;
  transform: translateX(10px);
}
.tips-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.8);
  z-index: 1;
  .tips {
    width: 70%;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,50%);
    background: #fff;
    border-radius: 5px;
    text-align: center;
    .bnt-wrap {
      margin-top: 15px;
      border-top: 1px solid #ccc;
      .tips-btn {
        margin: 15px 0;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        // &:last-child {
        //   border-left: 1px solid #ccc;
        // }
      }
    }

  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
.qx{
  background-color: red;
}
.layer {
  position: fixed;top:0;left: 0;
  height: 100%;width: 100%;
  z-index: 111;
  background-color: rgba(0,0,0,.8);
  .display-flex();justify-content: center;align-items:center;
  img {
    width: 50%;
  }
}
</style>

